<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 400px;
				top: 100px;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		
		 var oBox = document.getElementById("box");
		 
		/*bigStartMove(oBox,"width",10,300);
		//后面的高的运动函数 会把前面的宽变化的运动函数的定时器给清除掉 所以 宽没法运动了
		bigStartMove(oBox,"height",10,300);*/
		
		/*{
			name:"zhsanga",
			age:235
		}*/
		bigStartMove(oBox,{
			height:500,
			width:300
		},10);
		
		// 进行合并
		function bigStartMove(obj,json,speed) {
			
			clearInterval(obj.timer);
			var cur = 0;
			obj.timer = setInterval(function(){
				
				var onOff = true;
				
				// 传入多个属性名和属性值 然后在定时器里面 循环遍历这个对象 每一次定时器执行的时候 都会遍历一次所有的属性
				//让所有的属性都往前挪一步
				for(var attr in json) {
					
					var target = json[attr];
					
					//通过判断attr属性是什么 如果传入的属性是透明度 说明你一定是要让透明度运动
					if(attr == "opacity") {
						cur = Math.round(getStyle(obj,attr)*100);
					}else {
						cur = parseFloat(getStyle(obj,attr));
					}
					
					
					if(cur != target) {
						onOff = false;
						if(attr == "opacity") {
							obj.style.opacity = (cur + speed)/100 ;
							obj.style.filter = 'alpha(opacity='+ (cur + speed) +')';
						}else{
							obj.style[attr] = cur + speed + "px";
						}
					}
					
					
				}
				
				if(onOff) {
					clearInterval(obj.timer);
					obj.timer = null;
				}
				
				
			},30);
			
		}
		
		
		
		function getStyle(obj,attr) {
			return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
		}
		
	</script>
</html>
